<template>
  <div>
  <el-form ref="orderForm" :model="order" label-width="80px" :rules="rules">
    <el-form-item label="选码" prop="codes">
      <el-checkbox-group v-model="order.codes" :min="minNum" text-color="white" fill="rgb(233, 233, 235)"
                         :max="maxNum"
      >
        <el-checkbox-button v-for="code in codeList" :label="code.code" :key="code.code">
          <div :class="'codeClass '+code.color+'Class'">
            <div class="codeDiv">{{ code.code }}</div>
            <div class="fiveElementsDiv">{{ code.fiveElements }}</div>
            <div class="zodiacDiv">{{ code.zodiac }}</div>
          </div>
        </el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="金额" prop="buyAmount">
      <el-input v-model.number="order.buyAmount" autocomplete="off"></el-input>
      <el-input-number v-model="order.buyAmount"  :min="0"  :max="10000" :step="step" label="金额"
      ></el-input-number>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addOrder('orderForm')">提交</el-button>
      <el-button @click="resetForm('orderForm')">重置</el-button>
    </el-form-item>
  </el-form>
  <el-card v-if="combination.length>0">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-statistic
          :value="step"
          title="组数"
        ></el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic
          group-separator=","
          :precision="2"
          :value="order.buyAmount/(step==0?1:step)"
          title="元/组"
        ></el-statistic>
      </el-col>
    </el-row>
    <el-row>
      <ul class="infinite-list"  style="overflow:auto;max-height: 200px">
        <li v-for="(item,index) in combination" class="infinite-list-item">
          <div> <span style="width: 100px;display: inline-block;">第 {{index+1}} 组:</span> <div class="combinationClass" v-for="code in item"> {{code}} </div> </div>
        </li>
      </ul>
    </el-row>
  </el-card>
  </div>
</template>
<script>
import { generateCombinations } from '@/utils/algorithm'

export default {
  name: 'PlayOrderPanel',
  dicts: ['play_type'],
  components: {},
  props: {
    type: {
      type: String,
      default: null
    },
    bankerId: {
      type: Number,
      default: null
    },
    minNum: {
      type: Number,
      default: 0
    },
    maxNum: {
      type: Number,
      default: 49
    }
  },
  data() {
    var codeValidator = (rule, value, callback) => {
      if (value === '' || value.length == 0) {
        callback(new Error('请选择特码'));
      } else {
        if (this.order.codes.length === 0) {
          console.log(this.$refs.orderForm);
          this.$refs.orderForm.validateField('codes');
        }
        callback();
      }
    };
    return {
      order:{
        codes: [],
        buyAmount: 0,
        bankerId: this.bankerId,
        type:this.type,
        sellAmount:0,
        custId:null,
        bossId:null
      },
      step: 0,
      typeStep: {
        TM: 1,
        TC: 2,
        MZ: 2,
        EZE: 2,
        SZS: 3,
        WBZ: 5,
        WZY: 5,
        SZE: 3,
        HONB: 1,
        LVB: 1,
        LANB: 1,
        ONE_ZODIAC: 1,
        TWO_ZODIAC: 2,
        THREE_ZODIAC: 3,
        FOUR_ZODIAC: 4,
        FIVE_ZODIAC: 5
      },
      codeList: [
        {
          id: 99,
          year: 2025,
          code: 1,
          zodiac: '蛇',
          zodiacCode: 'snake',
          color: 'red',
          sod: 0,
          size: 0,
          fiveElements: '火',
          head: 0,
          tail: 1
        },
        {
          id: 100,
          year: 2025,
          code: 2,
          zodiac: '龙',
          zodiacCode: 'dragon',
          color: 'red',
          sod: 1,
          size: 0,
          fiveElements: '金',
          head: 0,
          tail: 2
        },
        {
          id: 101,
          year: 2025,
          code: 3,
          zodiac: '兔',
          zodiacCode: 'rabbit',
          color: 'blue',
          sod: 0,
          size: 0,
          fiveElements: '金',
          head: 0,
          tail: 3
        },
        {
          id: 102,
          year: 2025,
          code: 4,
          zodiac: '虎',
          zodiacCode: 'tiger',
          color: 'blue',
          sod: 1,
          size: 0,
          fiveElements: '土',
          head: 0,
          tail: 4
        },
        {
          id: 103,
          year: 2025,
          code: 5,
          zodiac: '牛',
          zodiacCode: 'cow',
          color: 'green',
          sod: 0,
          size: 0,
          fiveElements: '土',
          head: 0,
          tail: 5
        },
        {
          id: 104,
          year: 2025,
          code: 6,
          zodiac: '鼠',
          zodiacCode: 'rat',
          color: 'green',
          sod: 1,
          size: 0,
          fiveElements: '木',
          head: 0,
          tail: 6
        },
        {
          id: 105,
          year: 2025,
          code: 7,
          zodiac: '猪',
          zodiacCode: 'pig',
          color: 'red',
          sod: 0,
          size: 0,
          fiveElements: '木',
          head: 0,
          tail: 7
        },
        {
          id: 106,
          year: 2025,
          code: 8,
          zodiac: '狗',
          zodiacCode: 'dog',
          color: 'red',
          sod: 1,
          size: 0,
          fiveElements: '火',
          head: 0,
          tail: 8
        },
        {
          id: 107,
          year: 2025,
          code: 9,
          zodiac: '鸡',
          zodiacCode: 'chicken',
          color: 'blue',
          sod: 0,
          size: 0,
          fiveElements: '火',
          head: 0,
          tail: 9
        },
        {
          id: 108,
          year: 2025,
          code: 10,
          zodiac: '猴',
          zodiacCode: 'monkey',
          color: 'blue',
          sod: 1,
          size: 0,
          fiveElements: '金',
          head: 1,
          tail: 0
        },
        {
          id: 109,
          year: 2025,
          code: 11,
          zodiac: '羊',
          zodiacCode: 'sheep',
          color: 'green',
          sod: 0,
          size: 0,
          fiveElements: '金',
          head: 1,
          tail: 1
        },
        {
          id: 110,
          year: 2025,
          code: 12,
          zodiac: '马',
          zodiacCode: 'horse',
          color: 'red',
          sod: 1,
          size: 0,
          fiveElements: '水',
          head: 1,
          tail: 2
        },
        {
          id: 111,
          year: 2025,
          code: 13,
          zodiac: '蛇',
          zodiacCode: 'snake',
          color: 'red',
          sod: 0,
          size: 0,
          fiveElements: '水',
          head: 1,
          tail: 3
        },
        {
          id: 112,
          year: 2025,
          code: 14,
          zodiac: '龙',
          zodiacCode: 'dragon',
          color: 'blue',
          sod: 1,
          size: 0,
          fiveElements: '木',
          head: 1,
          tail: 4
        },
        {
          id: 113,
          year: 2025,
          code: 15,
          zodiac: '兔',
          zodiacCode: 'rabbit',
          color: 'blue',
          sod: 0,
          size: 0,
          fiveElements: '木',
          head: 1,
          tail: 5
        },
        {
          id: 114,
          year: 2025,
          code: 16,
          zodiac: '虎',
          zodiacCode: 'tiger',
          color: 'green',
          sod: 1,
          size: 0,
          fiveElements: '火',
          head: 1,
          tail: 6
        },
        {
          id: 115,
          year: 2025,
          code: 17,
          zodiac: '牛',
          zodiacCode: 'cow',
          color: 'green',
          sod: 0,
          size: 0,
          fiveElements: '火',
          head: 1,
          tail: 7
        },
        {
          id: 116,
          year: 2025,
          code: 18,
          zodiac: '鼠',
          zodiacCode: 'rat',
          color: 'red',
          sod: 1,
          size: 0,
          fiveElements: '土',
          head: 1,
          tail: 8
        },
        {
          id: 117,
          year: 2025,
          code: 19,
          zodiac: '猪',
          zodiacCode: 'pig',
          color: 'red',
          sod: 0,
          size: 0,
          fiveElements: '土',
          head: 1,
          tail: 9
        },
        {
          id: 118,
          year: 2025,
          code: 20,
          zodiac: '狗',
          zodiacCode: 'dog',
          color: 'blue',
          sod: 1,
          size: 1,
          fiveElements: '水',
          head: 2,
          tail: 0
        },
        {
          id: 119,
          year: 2025,
          code: 21,
          zodiac: '鸡',
          zodiacCode: 'chicken',
          color: 'green',
          sod: 0,
          size: 1,
          fiveElements: '水',
          head: 2,
          tail: 1
        },
        {
          id: 120,
          year: 2025,
          code: 22,
          zodiac: '猴',
          zodiacCode: 'monkey',
          color: 'green',
          sod: 1,
          size: 1,
          fiveElements: '木',
          head: 2,
          tail: 2
        },
        {
          id: 121,
          year: 2025,
          code: 23,
          zodiac: '羊',
          zodiacCode: 'sheep',
          color: 'red',
          sod: 0,
          size: 1,
          fiveElements: '木',
          head: 2,
          tail: 3
        },
        {
          id: 122,
          year: 2025,
          code: 24,
          zodiac: '马',
          zodiacCode: 'horse',
          color: 'red',
          sod: 1,
          size: 1,
          fiveElements: '金',
          head: 2,
          tail: 4
        },
        {
          id: 123,
          year: 2025,
          code: 25,
          zodiac: '蛇',
          zodiacCode: 'snake',
          color: 'blue',
          sod: 0,
          size: 1,
          fiveElements: '金',
          head: 2,
          tail: 5
        },
        {
          id: 124,
          year: 2025,
          code: 26,
          zodiac: '龙',
          zodiacCode: 'dragon',
          color: 'blue',
          sod: 1,
          size: 1,
          fiveElements: '土',
          head: 2,
          tail: 6
        },
        {
          id: 125,
          year: 2025,
          code: 27,
          zodiac: '兔',
          zodiacCode: 'rabbit',
          color: 'green',
          sod: 0,
          size: 1,
          fiveElements: '土',
          head: 2,
          tail: 7
        },
        {
          id: 126,
          year: 2025,
          code: 28,
          zodiac: '虎',
          zodiacCode: 'tiger',
          color: 'green',
          sod: 1,
          size: 1,
          fiveElements: '水',
          head: 2,
          tail: 8
        },
        {
          id: 127,
          year: 2025,
          code: 29,
          zodiac: '牛',
          zodiacCode: 'cow',
          color: 'red',
          sod: 0,
          size: 1,
          fiveElements: '水',
          head: 2,
          tail: 9
        },
        {
          id: 128,
          year: 2025,
          code: 30,
          zodiac: '鼠',
          zodiacCode: 'rat',
          color: 'red',
          sod: 1,
          size: 1,
          fiveElements: '火',
          head: 3,
          tail: 0
        },
        {
          id: 129,
          year: 2025,
          code: 31,
          zodiac: '猪',
          zodiacCode: 'pig',
          color: 'blue',
          sod: 0,
          size: 1,
          fiveElements: '火',
          head: 3,
          tail: 1
        },
        {
          id: 130,
          year: 2025,
          code: 32,
          zodiac: '狗',
          zodiacCode: 'dog',
          color: 'green',
          sod: 1,
          size: 1,
          fiveElements: '金',
          head: 3,
          tail: 2
        },
        {
          id: 131,
          year: 2025,
          code: 33,
          zodiac: '鸡',
          zodiacCode: 'chicken',
          color: 'green',
          sod: 0,
          size: 1,
          fiveElements: '金',
          head: 3,
          tail: 3
        },
        {
          id: 132,
          year: 2025,
          code: 34,
          zodiac: '猴',
          zodiacCode: 'monkey',
          color: 'red',
          sod: 1,
          size: 1,
          fiveElements: '土',
          head: 3,
          tail: 4
        },
        {
          id: 133,
          year: 2025,
          code: 35,
          zodiac: '羊',
          zodiacCode: 'sheep',
          color: 'red',
          sod: 0,
          size: 1,
          fiveElements: '土',
          head: 3,
          tail: 5
        },
        {
          id: 134,
          year: 2025,
          code: 36,
          zodiac: '马',
          zodiacCode: 'horse',
          color: 'blue',
          sod: 1,
          size: 1,
          fiveElements: '木',
          head: 3,
          tail: 6
        },
        {
          id: 135,
          year: 2025,
          code: 37,
          zodiac: '蛇',
          zodiacCode: 'snake',
          color: 'blue',
          sod: 0,
          size: 1,
          fiveElements: '木',
          head: 3,
          tail: 7
        },
        {
          id: 136,
          year: 2025,
          code: 38,
          zodiac: '龙',
          zodiacCode: 'dragon',
          color: 'green',
          sod: 1,
          size: 1,
          fiveElements: '火',
          head: 3,
          tail: 8
        },
        {
          id: 137,
          year: 2025,
          code: 39,
          zodiac: '兔',
          zodiacCode: 'rabbit',
          color: 'green',
          sod: 0,
          size: 1,
          fiveElements: '火',
          head: 3,
          tail: 9
        },
        {
          id: 138,
          year: 2025,
          code: 40,
          zodiac: '虎',
          zodiacCode: 'tiger',
          color: 'red',
          sod: 1,
          size: 1,
          fiveElements: '金',
          head: 4,
          tail: 0
        },
        {
          id: 139,
          year: 2025,
          code: 41,
          zodiac: '牛',
          zodiacCode: 'cow',
          color: 'blue',
          sod: 0,
          size: 1,
          fiveElements: '金',
          head: 4,
          tail: 1
        },
        {
          id: 140,
          year: 2025,
          code: 42,
          zodiac: '鼠',
          zodiacCode: 'rat',
          color: 'blue',
          sod: 1,
          size: 1,
          fiveElements: '水',
          head: 4,
          tail: 2
        },
        {
          id: 141,
          year: 2025,
          code: 43,
          zodiac: '猪',
          zodiacCode: 'pig',
          color: 'green',
          sod: 0,
          size: 1,
          fiveElements: '水',
          head: 4,
          tail: 3
        },
        {
          id: 142,
          year: 2025,
          code: 44,
          zodiac: '狗',
          zodiacCode: 'dog',
          color: 'green',
          sod: 1,
          size: 1,
          fiveElements: '木',
          head: 4,
          tail: 4
        },
        {
          id: 143,
          year: 2025,
          code: 45,
          zodiac: '鸡',
          zodiacCode: 'chicken',
          color: 'red',
          sod: 0,
          size: 1,
          fiveElements: '木',
          head: 4,
          tail: 5
        },
        {
          id: 144,
          year: 2025,
          code: 46,
          zodiac: '猴',
          zodiacCode: 'monkey',
          color: 'red',
          sod: 1,
          size: 1,
          fiveElements: '火',
          head: 4,
          tail: 6
        },
        {
          id: 145,
          year: 2025,
          code: 47,
          zodiac: '羊',
          zodiacCode: 'sheep',
          color: 'blue',
          sod: 0,
          size: 1,
          fiveElements: '火',
          head: 4,
          tail: 7
        },
        {
          id: 146,
          year: 2025,
          code: 48,
          zodiac: '马',
          zodiacCode: 'horse',
          color: 'blue',
          sod: 1,
          size: 1,
          fiveElements: '土',
          head: 4,
          tail: 8
        },
        {
          id: 147,
          year: 2025,
          code: 49,
          zodiac: '蛇',
          zodiacCode: 'snake',
          color: 'green',
          sod: 0,
          size: 1,
          fiveElements: '土',
          head: 4,
          tail: 9
        }
      ],
      rules: {
        codes:[
          { required:true,validator:codeValidator,trigger:'change'},
        ],
        buyAmount:[
          { required:true,message:'请输入买入金额',trigger:'blur'},
        ]
      }

    }
  },
  computed: {
    combination : function() {
      if (this.order.codes.length >= this.typeStep[this.type]) {
        return generateCombinations(this.order.codes, this.typeStep[this.type])
      } else {
        return []
      }
    }
  },
  watch: {
      'order.codes':function(val) {
        if (val.length >= this.typeStep[this.type]) {
          this.step = generateCombinations(val, this.typeStep[this.type]).length
        } else {
          return 0
        }
      }
  },
  methods: {
    addOrder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var order = {
             bankerId: this.bankerId,
             type: this.type,
             buyAmount: this.order.buyAmount,
             codes: this.order.codes,
          }
          this.$emit("addOrder",order)
          this.$refs[formName].resetFields();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
.codeClass {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.codeClass div {
  text-align: center;
}

.redClass {
  background-color: #F56C6C;
}

.greenClass {
  background-color: #67C23A;
}

.blueClass {
  background-color: #409EFF;
}

.el-checkbox {
  margin-top: 30px !important;
}

.codeDiv {
  display: block;
  font-size: 30px;
}

.zodiacDiv {
  display: block;
  font-size: 20px;
}

.fiveElementsDiv {
  display: block;
  font-size: 20px;
}

.combinationClass {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FF5722;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin-left: 5px;
  display: inline-block;
}
.el-checkbox-button__inner {
  padding: 0px !important;
  margin-left: 5px;
}
</style>
